import React from 'react';
import type { BusinessSystem } from '@/types/business';
import { getAssessmentTypeName } from '@/utils/utils';
import { getAssessmentTypeColor } from '@/utils/utils';

interface BusinessCardProps {
  business: BusinessSystem;
  isSelected: boolean;
  onClick: () => void;
}


const BusinessCard: React.FC<BusinessCardProps> = ({ business, isSelected, onClick }) => {
  // Format date for display
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    });
  };


  // Get status label and color
  const getStatusInfo = (status: string) => {
    if (status === 'in_progress') {
      return { label: '进行中', color: 'bg-blue-100 text-blue-800' };
    }
    return { label: '已完成', color: 'bg-green-100 text-green-800' };
  };

  const statusInfo = getStatusInfo(business.status);
  
  return (
    <div 
      className={`p-4 rounded-lg border shadow-sm transition-all duration-200 cursor-pointer min-h-[200px] flex flex-col justify-between
        ${isSelected ? 'border-blue-500 bg-blue-50' : 'border-slate-200 hover:border-slate-300 hover:bg-slate-50'}`}
      onClick={onClick}
    >
      <div>
        <div className="flex justify-between items-start mb-2">
          <h3 className="text-lg font-medium text-slate-800 mb-1 line-clamp-2">{business.name}</h3>
          <span className={`text-xs px-2 py-1 rounded-full ${statusInfo.color}`}>
            {statusInfo.label}
          </span>
        </div>
        
        <div className="space-y-2 text-sm text-slate-600">
          <p className="flex items-center">
            <span className="w-20 text-slate-500">定级备案：</span>
            <span>{business.ratingFilingName}</span>
          </p>
          <p className="flex items-center">
            <span className="w-20 text-slate-500">负责人：</span>
            <span>{business.responsiblePerson}</span>
          </p>
          <p className="flex items-center">
            <span className="w-20 text-slate-500">所属部门：</span>
            <span>{business.businessDepartment}</span>
          </p>
          <p className="flex items-center">
            <span className="w-20 text-slate-500">联系方式：</span>
            <span>{business.contact}</span>
          </p>
          <p className="flex items-center">
            <span className="w-20 text-slate-500">评估类型：</span>
            <span className={getAssessmentTypeColor(business.assessmentType)}>
              {getAssessmentTypeName(business.assessmentType)}
            </span>
          </p>
        </div>
      </div>
      
      <div className="text-xs text-slate-500 flex justify-between mt-4 pt-2 border-t border-slate-100">
        <span>创建日期：{formatDate(business.createdAt)}</span>
        <span>预计完成：{formatDate(business.expectedCompletionDate)}</span>
      </div>
    </div>
  );
};

export default BusinessCard;
